<template>
  <!-- 我的 -->
  <view class="content" v-if="!state.loading && state.dataSource">
    <!-- 代理商信息 -->
    <view class="info bg-white">
      <view class="box-avatar flex flex-y-center fz36 gray3">
        <image
          class="avatar mr30"
          v-if="state.dataSource.avatar"
          :src="state.dataSource.avatar"
          mode="aspectFit"
        ></image>
        <image
          class="avatar mr30"
          v-else
          src="../../static/logo.png"
          mode="aspectFit"
        ></image>
        <view class="bold mt30">{{ state.dataSource.realname || "-" }}</view>
      </view>
      <view
        class="ct flex mt30 t-c"
        v-if="state.dataSource && state.roleCode !== 'agent_maintain'"
      >
        <view class="flex1">
          <view class="fz32 gray3 bold">{{
            $filter.formatYuan(state.dataSource.withdrawnAmount)
          }}</view>
          <view class="mt30 gray9 fz26">已提现（元）</view>
        </view>
        <view class="flex1">
          <view class="fz32 gray3 bold">{{
            $filter.formatYuan(state.dataSource.undrawnAmount)
          }}</view>
          <view class="mt30 gray9 fz26">未提现（元）</view>
        </view>
        <view class="flex1">
          <view class="fz32 gray3 bold">{{
            $filter.formatYuan(state.dataSource.reserveAmount)
          }}</view>
          <view class="mt30 gray9 fz26">储备金（元）</view>
        </view>
      </view>
    </view>

    <!-- 操作 -->
    <view class="btns mt30 bg-white">
      <view class="fz30 gray3 fz30">我的服务</view>
      <view class="flex-wrap t-c">
        <!-- <view
          class="item"
          @click="$jump.navigateTo('/pages/analysis/index')"
          v-if="state.roleCode !== 'agent_maintain'"
        >
          <sw-icons icon="icon-shuju" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">全景数据</view>
        </view> -->
        <view
          class="item"
          @click="$jump.navigateTo('/pages/fund/index')"
          v-if="state.roleCode !== 'agent_maintain'"
        >
          <sw-icons icon="icon-gerenzijin" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">资金流水</view>
        </view>
        <view
          class="item"
          @click="$jump.navigateTo('/pages/user/terminal')"
          v-if="state.roleCode !== 'agent_maintain'"
        >
          <sw-icons icon="icon-weihu" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">终端维护</view>
        </view>
        <view
          class="item"
          @click="$jump.navigateTo('/pages/withdraw/index')"
          v-if="state.roleCode !== 'agent_maintain'"
        >
          <sw-icons icon="icon-tixian" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">提现管理</view>
        </view>
        <view
          class="item"
          @click="$jump.navigateTo('/pages/user/list')"
          v-if="state.roleCode !== 'agent_maintain'"
        >
          <sw-icons icon="icon-yonghu" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">用户管理</view>
        </view>
        <view class="item" @click="$jump.navigateTo('/pages/user/password')">
          <sw-icons icon="icon-mimaguanli" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">修改密码</view>
        </view>
        <view class="item" @click="callPhone">
          <sw-icons icon="icon-kefu" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">联系客服</view>
        </view>
        <view class="item" @click="onLoginOut">
          <sw-icons icon="icon-tuichu" size="50" color="#008afe"></sw-icons>
          <view class="mt10 fz26 gray9">退出登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from "vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { accountInfo } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();
const state = reactive({
  loading: true,
  roleCode: "",
  dataSource: {},
});

state.roleCode = getApp().globalData.roleCode;
const loadData = () => {
  accountInfo()
    .then((res) => {
      if (res.success) {
        state.dataSource = res.result;
      }
    })
    .finally(() => {
      state.loading = false;
      uni.stopPullDownRefresh();
    });
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 下拉刷新
onPullDownRefresh(() => {
  loadData();
});

// 拨打电话
const callPhone = () => {
  // const num = state.dataSource.suppPhone;
  const num = "400-895-1906";
  uni.makePhoneCall({
    phoneNumber: num.toString(), //电话号码
  });
};

// 退出登录
const onLoginOut = () => {
  uni.showModal({
    title: "提示",
    content: "是否退出登录",
    success: function (res) {
      if (res.confirm) {
        uni.removeStorage({ key: "token" });
        uni.showToast({
          title: "退出成功",
          mask: true,
        });
        setTimeout(() => {
          proxy.$jump.reLaunch("/pages/account/login");
        }, 1000);
      }
    },
  });
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.content {
  overflow: hidden;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -600rpx;
    left: -375rpx;
    width: 1500rpx;
    height: 750rpx;
    background: @main-theme-color;
    border-radius: 50%;
  }
}

.info {
  position: relative;
  padding: 120rpx 40rpx 40rpx;
  margin: 110rpx 30rpx 30rpx;
  border-radius: 20rpx;
  .box-avatar {
    position: absolute;
    top: -35rpx;
  }
  .avatar {
    position: relative;
    z-index: 3;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    box-shadow: 0 0 10rpx rgba(#000, 0.3);
    background: #fff;
  }
}

.btns {
  padding: 20rpx;
  line-height: 60rpx;
  .item {
    width: 33%;
    padding: 40rpx 0;
    flex-shrink: 0;
  }
}
</style>
